<template>
  <div class="xiangqing2_total">
    <ul class="maney_ul">
      <li><span>取车地:{{this.$store.state.getCarLocation}}</span><span></span></li>
      <li><span>还车地:{{this.$store.state.returnCarLocation}}</span><span></span></li>
      <li><span>定金:{{ data.preparidAmount }}元</span><span>使用费:{{ data.totalPrice - data.preparidAmount }}元</span></li>
    </ul>
    <div class="botom_totalmoney_btn">
      <p>合计：<span>{{ data.totalPrice }}</span> 元</p>
      <br>
<!--    -->
      <div class="dingjin">

        <van-radio-group v-model="radio">
          <ul class="fuzhang">
            <li>
              <img src="../../../assets/dingdanxinxi/kehuyue.jpg" alt=""/>
              <span>{{ fukuan[0].text }}</span>
              <van-radio class="radio_checke_fukuan_style" value="账户余额" name="账户余额"></van-radio>
            </li>
            <li>
              <img src="../../../assets/dingdanxinxi/zhifubao.jpg" alt=""/>
              <span>{{ fukuan[1].text }}</span>
              <van-radio class="radio_checke_fukuan_style" value="支付宝" name="支付宝"></van-radio>
            </li>
            <li>
              <img src="../../../assets/dingdanxinxi/weixin.jpg" alt=""/>
              <span>{{ fukuan[2].text }}</span>
              <van-radio class="radio_checke_fukuan_style" value="微信" name="微信"></van-radio>
            </li>
          </ul>
        </van-radio-group>
      </div>

<!--        <div class="tongyi_yuedu">-->
<!--          <van-checkbox class="ckecked_tongyi_ground_btn" v-model="checked" shape="square"/>-->
<!--          <span>同意</span>-->
<!--          <span>《平价分时租车租赁协议》</span>-->
<!--        </div>-->

        <div>
          <van-popup :style="{ width: '95%', height: '45%', padding: '50px' }" v-model="show3">
            <div>
            <div class="sg-qrcode">
              <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="blue" colorLight="white"
                      backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
                      logoBackgroundColor="black"></vue-qr>

              <h2>请用支付宝扫码支付</h2>
<!--              <div>订单的状态:{{  }}</div>-->
              <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }"
                          @click="isAliPay">
                已支付
              </van-button>
            </div>
            </div>

          </van-popup>
        </div>
        <div>
          <van-popup :style="{ width: '95%', height: '45%', padding: '50px' }" v-model="show2">
            <div class="sg-qrcode">
              <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="green" colorLight="white"
                      backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
                      logoBackgroundColor="black"></vue-qr>
              <h2>请用微信扫码支付</h2>
<!--              <div>订单的状态:{{  }}</div>-->
              <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }"
                          @click="isVXPay">
                已支付
              </van-button>
            </div>
          </van-popup>
        </div>
        <div>
          <van-popup position="bottom" :style="{ width: '100%', height: '45%', padding: '10px' }" v-model="show1">



              <span>已有金额: </span><span>￥{{ this.$store.state.user.accountBalance }}元</span>
              <br>
              <p></p>
              <span>应付金额：</span><span>￥{{ data.totalPrice}}元</span>
              <br><br>
              <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }"
                          @click="yuE">
                支付
              </van-button>

          </van-popup>
        </div>


<!---->
      <br>
      <div>
<!--        -->
        <van-button class="bot_btn_col" color="#eeeeee"  @click="pay"
          >{{ radio }}</van-button
        >
        <van-button class="bot_btn_col" color="#eeeeee" @click="close_order"
          >取消订单</van-button
        >
      </div>
    </div>

  </div>
</template>

<script>
import {closeOrder, pay} from "../../../request/userinfo/userinfo";

import vueQr from 'vue-qr';
import Vue from "vue";
import { Notify } from 'vant';
Vue.use(vueQr);

export default {

  props: ['data'],
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      showList: false,
      radio: "账户余额",
      checked: false,
      code_url:"",
      fukuan: [{text: "账户余额"}, {text: "支付宝"}, {text: "微信"}],
    };
  },

  methods: {
    go_pay() {
      //alert(JSON.stringify(this.data))
      this.$store.state.shopname=this.data.name
      //alert(JSON.stringify(this.data.startTime))
      this.$store.state.startime=this.data.startTime
      this.$store.state.endtime=this.data.endTime
      this.$store.state.startime_=new Date(this.data.startTime)
      this.$store.state.endtime_=new Date(this.data.endTime)
       // this.$router.push("/dingdanxiangqing/");

    },
    close_order() {
      console.log(JSON.stringify(this.data))
      console.log(this.data.orderNo)
      console.log(this.$store.state.orderState[2].state)
      closeOrder({
        orderNo: this.data.orderNo,
        state: this.$store.state.orderState[2].state,
    })
      .then((res) => {
        console.log(res);
        if(res.code==2000) {
          this.$toast.fail("成功");
          this.$router.push("/home/domestic");
        }else {
          alert("操作失败")
        }
      });
    },
    pay(){
      console.log(this.radio)
      if (this.radio=="账户余额"){
        this.show1=true
        console.log("------"+this.$store.state.user.accountBalance)
        console.log("------"+this.$store.state.carinfo.orderNo)
        console.log("------"+this.$store.state.user.username)
        if(this.$store.state.user.accountBalance>this.$store.state.carinfo.price){
          console.log("金币充足可以支付")

        }else {
          console.log("租车币不足请充值")
        }

      }else if (this.radio=="支付宝"){

        console.log("支付宝")
        let ali ={
          orderNo:JSON.parse(JSON.stringify(this.$store.state.carinfo.orderNo)),
          preparidAmount:JSON.parse(JSON.stringify(this.$store.state.carinfo.price))
        }
        console.log("支付宝的订单与需要支付的钱 如下：")
        console.log(ali)
        this.$http.post("http://192.168.1.195:8000/system/payment/pay",ali).then(res=>{
          console.log(res)
          this.code_url=res.data.data
          this.show3=true
        })
      }else if (this.radio=="微信"){
        console.log("微信")
        let vx = {
          orderNo:JSON.parse(JSON.stringify(this.$store.state.carinfo.orderNo)),
          preparidAmount:JSON.parse(JSON.stringify(this.$store.state.carinfo.price))
        }
        console.log("微信的订单与需要支付的钱 如下：")
        console.log(vx)
        this.$http.post("http://192.168.1.195:8000/system/api/order/VXPay",vx).then(res=>{
          console.log(res)
          this.code_url=res.data.data.codeUrl
          this.show2=true
        })
      }
    },
    isVXPay(){
      let vx={
        orderNo:JSON.parse(JSON.stringify(this.$store.state.carinfo.orderNo)),
      }
      this.$http.post("http://192.168.1.195:8000/system/api/order/isOrder",vx).then(res=>{
          console.log(res)
        if(res.data.code==2000){
          // 已经可以使用 请写业务代码
          this.$router.push("/dingdantongzhi");
        }else{
          Notify({type: "danger", message: "您并未支付"});
        }
      })
    },
    isAliPay(){
      let ali = {
        orderNo:JSON.parse(JSON.stringify(this.$store.state.carinfo.orderNo)),}
      console.log(ali)
      this.$http.post("http://192.168.1.195:8000/system/payment/returnUrl",ali).then(res=>{
        console.log(res)
        if(res.data.code==2000){
          this.$router.push("/dingdantongzhi");
        }else{
          Notify({type: "danger", message: "您并未支付"});
        }
      })
    },
    yuE(){
      let yuE ={
        orderNo:JSON.parse(JSON.stringify(this.$store.state.carinfo.orderNo)),
        totalPrice:JSON.parse(JSON.stringify(this.$store.state.carinfo.price)),
        username:this.$store.state.user.username
      }
      console.log(yuE)
      this.$http.post("http://192.168.1.195:8000/system/api/order/inOrderPay",yuE).then(res=>{
        console.log(res)
          if(res.data.code==2000){
            this.$router.push("/dingdantongzhi");
          }
      })
    }
  },
  components: {},
};
</script>

<style scoped lang="less">
.xiangqing2_total {
  width: 100%;
  .maney_ul {
    width: 100%;
    height: 2.59rem;
    padding: 0.1rem 0.38rem;
    border-bottom: 0.01rem solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    li {
      font-size: 0.23rem;
      color: #666666;
      span:last-child {
        width: 2rem;
        float: right;
        margin-right: 0.1rem;
      }
    }
  }
  .botom_totalmoney_btn {
    height: 5.03rem;
    p {
      font-size: 0.23rem;
      color: #333;
      margin-top: 0.24rem;
      padding-left: 0.38rem;
      margin-bottom: 0.6rem;
      font-weight: 600;
      span {
        font-size: 0.36rem;
        font-weight: 600;
        color: #333;
      }
    }
    div {
      display: flex;
      justify-content: center;
      button:first-child {
        margin-right: 0.4rem;
      }
      button {
        width: 2.5rem;
        height: 0.9rem;
        border: 0.01rem solid #cccccc !important;
        border-radius: 0.1rem;
      }
      .bot_btn_col span {
        color: #666;
        font-weight: 600;
        font-size: 0.29rem;
      }
    }
  }

}
.dingjin {

  width: 120px;
  //height: 180%;
  margin-top: 0.05rem;
  font-size: 15px;

  //.yingfu {
  //  width: 95%;
  //  height: 0.73rem;
  //  margin: 0 auto;
  //  border-radius: 0.08rem;
  //  background: white;
  //  line-height: 0.73rem;
  //  padding-left: 0.15rem;
  //
  //  span {
  //    font-size: 0.25rem;
  //    font-weight: 600;
  //  }
  //
  //  span:last-child {
  //    color: #f0230e;
  //  }
  //}

  .fuzhang {
    width: 100%;
    height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-top: 0.25rem;
    //position: relative;

    li {

      flex: 1;
      display: flex;
      //align-items: center;

      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 0.08rem;
      }

      span {
        font-size: 0.26rem;
        margin-left: 0.26rem;
        font-weight: 600;
      }
    }
  }

  .tongyi_yuedu {
    //width: 95%;
    margin: 0.27rem auto 0.6rem auto;
    display: flex;
    align-items: center;

    span:nth-child(2) {
      font-size: 0.22rem;
      color: #666;
      margin-left: 0.2rem;
    }

    span:last-child {
      font-size: 0.23rem;
      color: #4395ff;
      margin-left: 0.29rem;
    }
  }

  .buton_botom {
    width: 100%;
    height: 0.81rem;
    background: #4395ff;
    color: white;
    font-size: 0.29rem;
  }

  .sg-qrcode {
    width: 10px;
    color: #2ba245;
  }
}
</style>

